<template>
  <div :class="wrapperClass">
    <!-- 标签 -->
    <div v-if="label" class="base-input__label">
      <span class="base-input__label-text">{{ label }}</span>
      <span v-if="required" class="base-input__required">*</span>
    </div>

    <!-- 输入框容器 -->
    <div class="base-input__wrapper">
      <!-- 前置图标 -->
      <van-icon
        v-if="leftIcon"
        :name="leftIcon"
        class="base-input__left-icon"
        @click="$emit('click-left-icon')"
      />

      <!-- 输入框 -->
      <input
        ref="inputRef"
        v-model="inputValue"
        :type="inputType"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        :class="inputClass"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @keyup.enter="handleEnter"
      />

      <!-- 清除按钮 -->
      <van-icon
        v-if="clearable && inputValue && !disabled && !readonly"
        name="clear"
        class="base-input__clear"
        @click="handleClear"
      />

      <!-- 后置图标 -->
      <van-icon
        v-if="rightIcon"
        :name="rightIcon"
        class="base-input__right-icon"
        @click="$emit('click-right-icon')"
      />

      <!-- 密码显示切换 -->
      <van-icon
        v-if="type === 'password'"
        :name="showPassword ? 'eye-o' : 'closed-eye'"
        class="base-input__password-icon"
        @click="togglePassword"
      />
    </div>

    <!-- 错误信息 -->
    <div v-if="errorMessage" class="base-input__error">
      {{ errorMessage }}
    </div>

    <!-- 字数统计 -->
    <div v-if="showWordLimit && maxlength" class="base-input__word-limit">
      {{ inputValue.length }}/{{ maxlength }}
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, defineComponent } from 'vue'

export default defineComponent({
  name: 'BaseInput',
  props: {
    /**
     * 输入框值
     */
    modelValue: {
      type: [String, Number],
      default: ''
    },
    /**
     * 输入框类型
     */
    type: {
      type: String,
      default: 'text',
      validator: (value) => ['text', 'password', 'number', 'tel', 'email', 'url', 'search'].includes(value)
    },
    /**
     * 标签文本
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * 占位符
     */
    placeholder: {
      type: String,
      default: '请输入'
    },
    /**
     * 是否必填
     */
    required: {
      type: Boolean,
      default: false
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否只读
     */
    readonly: {
      type: Boolean,
      default: false
    },
    /**
     * 是否可清除
     */
    clearable: {
      type: Boolean,
      default: false
    },
    /**
     * 最大长度
     */
    maxlength: {
      type: [String, Number],
      default: null
    },
    /**
     * 是否显示字数统计
     */
    showWordLimit: {
      type: Boolean,
      default: false
    },
    /**
     * 左侧图标
     */
    leftIcon: {
      type: String,
      default: ''
    },
    /**
     * 右侧图标
     */
    rightIcon: {
      type: String,
      default: ''
    },
    /**
     * 错误信息
     */
    errorMessage: {
      type: String,
      default: ''
    },
    /**
     * 输入框尺寸
     */
    size: {
      type: String,
      default: 'normal',
      validator: (value) => ['large', 'normal', 'small'].includes(value)
    },
    /**
     * 验证规则
     */
    rules: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'input', 'focus', 'blur', 'clear', 'enter', 'click-left-icon', 'click-right-icon'],
  setup(props, { emit }) {
    const inputRef = ref(null)
    const showPassword = ref(false)
    const isFocused = ref(false)

    /**
     * 输入框值
     */
    const inputValue = computed({
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value)
    })

    /**
     * 实际输入类型
     */
    const inputType = computed(() => {
      if (props.type === 'password') {
        return showPassword.value ? 'text' : 'password'
      }
      return props.type
    })

    /**
     * 容器样式类
     */
    const wrapperClass = computed(() => {
      const classes = ['base-input']
      
      classes.push(`base-input--${props.size}`)
      
      if (props.disabled) classes.push('base-input--disabled')
      if (props.readonly) classes.push('base-input--readonly')
      if (props.errorMessage) classes.push('base-input--error')
      if (isFocused.value) classes.push('base-input--focused')
      
      return classes
    })

    /**
     * 输入框样式类
     */
    const inputClass = computed(() => {
      const classes = ['base-input__input']
      
      if (props.leftIcon) classes.push('base-input__input--left-icon')
      if (props.rightIcon || props.clearable || props.type === 'password') {
        classes.push('base-input__input--right-icon')
      }
      
      return classes
    })

    /**
     * 输入事件处理
     */
    const handleInput = (event) => {
      const value = event.target.value
      emit('input', value)
      validateInput(value)
    }

    /**
     * 聚焦事件处理
     */
    const handleFocus = (event) => {
      isFocused.value = true
      emit('focus', event)
    }

    /**
     * 失焦事件处理
     */
    const handleBlur = (event) => {
      isFocused.value = false
      emit('blur', event)
      validateInput(inputValue.value)
    }

    /**
     * 回车事件处理
     */
    const handleEnter = (event) => {
      emit('enter', event)
    }

    /**
     * 清除事件处理
     */
    const handleClear = () => {
      inputValue.value = ''
      emit('clear')
      inputRef.value?.focus()
    }

    /**
     * 切换密码显示
     */
    const togglePassword = () => {
      showPassword.value = !showPassword.value
    }

    /**
     * 验证输入
     */
    const validateInput = (value) => {
      // 这里可以添加验证逻辑
      // 根据 rules 进行验证
      console.log('验证输入:', value)
    }

    /**
     * 聚焦输入框
     */
    const focus = () => {
      inputRef.value?.focus()
    }

    /**
     * 失焦输入框
     */
    const blur = () => {
      inputRef.value?.blur()
    }

    // 监听值变化
    watch(() => props.modelValue, (newValue) => {
      validateInput(newValue)
    })

    return {
      inputRef,
      inputValue,
      inputType,
      showPassword,
      wrapperClass,
      inputClass,
      handleInput,
      handleFocus,
      handleBlur,
      handleEnter,
      handleClear,
      togglePassword,
      focus,
      blur
    }
  }
})
</script>

<style lang="scss" scoped>
.base-input {
  position: relative;
  font-size: 14px;

  &__label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #323233;
  }

  &__label-text {
    flex: 1;
  }

  &__required {
    margin-left: 4px;
    color: #ee0a24;
  }

  &__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background-color: #fff;
    border: 1px solid #ebedf0;
    border-radius: 6px;
    transition: border-color 0.2s;

    &:hover {
      border-color: #c8c9cc;
    }
  }

  &__input {
    flex: 1;
    width: 0;
    height: 44px;
    padding: 0;
    color: #323233;
    font-size: 14px;
    line-height: 1.5;
    background-color: transparent;
    border: 0;
    outline: none;
    resize: none;

    &::placeholder {
      color: #c8c9cc;
    }

    &--left-icon {
      padding-left: 8px;
    }

    &--right-icon {
      padding-right: 8px;
    }
  }

  &__left-icon,
  &__right-icon {
    color: #969799;
    font-size: 16px;
    cursor: pointer;

    &:hover {
      color: #323233;
    }
  }

  &__clear,
  &__password-icon {
    color: #c8c9cc;
    font-size: 16px;
    cursor: pointer;

    &:hover {
      color: #969799;
    }
  }

  &__error {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
    color: #ee0a24;
  }

  &__word-limit {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
    color: #969799;
    text-align: right;
  }

  // 尺寸
  &--large {
    .base-input__input {
      height: 50px;
      font-size: 16px;
    }
  }

  &--small {
    .base-input__input {
      height: 32px;
      font-size: 12px;
    }

    .base-input__wrapper {
      padding: 0 12px;
    }
  }

  // 状态
  &--focused {
    .base-input__wrapper {
      border-color: #1989fa;
    }
  }

  &--error {
    .base-input__wrapper {
      border-color: #ee0a24;
    }
  }

  &--disabled {
    .base-input__wrapper {
      background-color: #f7f8fa;
      border-color: #ebedf0;
      cursor: not-allowed;
    }

    .base-input__input {
      color: #c8c9cc;
      cursor: not-allowed;
    }
  }

  &--readonly {
    .base-input__wrapper {
      background-color: #f7f8fa;
    }

    .base-input__input {
      cursor: default;
    }
  }
}
</style>